// src/components/emoji-popover.tsx
'use client';
import React, {useState} from 'react';
import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
// import data from '@emoji-mart/data'
// import Picker from '@emoji-mart/react'
import EmojiPicker, {type EmojiClickData} from 'emoji-picker-react'

interface Props {
    children: React.ReactNode;
    hint?: string
    // onEmojiSelected?: (emoji: any) => void
    onEmojiSelected?: (emoji: string) => void
}

const EmojiPopover = ({children, hint = 'Emoji', onEmojiSelected}: Props) => {
    const [popoverOpen, setPopoverOpen] = useState(false)
    const [tooltipOpen, setTooltipOpen] = useState(false);

    // const onSelect = (emoji: any) => {
    //     onEmojiSelected?.(emoji)
    //     setPopoverOpen(false)
    //
    //     setTimeout(() => {
    //         setTooltipOpen(false)
    //     }, 500)
    // }
    const onSelect = (value: EmojiClickData) => {
        // console.log(value)
        onEmojiSelected?.(value.emoji)
        setPopoverOpen(false)

        setTimeout(() => {
            setTooltipOpen(false)
        }, 500)
    }

    return (
        <>
            <TooltipProvider>
                <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
                    <Tooltip
                        delayDuration={50}
                        open={tooltipOpen}
                        onOpenChange={setTooltipOpen}
                    >
                        <PopoverTrigger asChild>
                            <TooltipTrigger asChild>
                                {children}
                            </TooltipTrigger>
                        </PopoverTrigger>
                        <TooltipContent className={`bg-black text-white border border-white/5`}>
                            <p className={`font-medium text-xs`}>{hint}</p>
                        </TooltipContent>
                    </Tooltip>
                    <PopoverContent className={`p-0 w-full border-none shadow-none`}>
                        {/*<Picker
                            data={data}
                            onEmojiSelect={onSelect}
                        />*/}
                        <EmojiPicker
                            onEmojiClick={onSelect}/>
                    </PopoverContent>
                </Popover>
            </TooltipProvider>
        </>
    );
};

export default EmojiPopover;
